<template>
	<view class="content">
		<view class="icon-login">
			<view class="left">
				<u-avatar size="40" fontSize="12" randomBgColor></u-avatar>
				<uni-title :title="titlelogin" color="white"></uni-title>
			</view>

			<view class="right">
				<button
					style="font-size: 13px; width: 200px; height: 30px; border:none; color:white; border-color: #00ACBD; background-color: #00ACBD;"
					@click="onlogin()">切换账号</button>
				<uni-icons type="right" size="20" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="onxing" @click="onxinke()">
			<uni-icons type="plus" size="30" color="#00ACBD"></uni-icons>
			<uni-title title="新增乘客" color="#00ACBD"></uni-title>
		</view>

		<view class="onxing">
			<uni-title title="下拉可刷新乘客列表"></uni-title>
		</view>
		<uni-list :border="true">
			<uni-list-item v-for="(item, index) in Listdata" :key="index">
				<template v-slot:header>
					<view class="slot-box" @click="onxinke(item)">
						<uni-icons type="compose" size="30"></uni-icons>
					</view>
				</template>
				<template v-slot:body>
					<view class="jjss">
						<uni-title :title="item.chencheren"></uni-title>
						<u-tag :text="item.chenren" plain size="mini" type="warning"></u-tag>
					</view>
					<uni-title :title=" `身份证 ${item.haoma}`"></uni-title>
				</template>
			</uni-list-item>

		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Listdata: []
			}
		},
		onLoad(option) {
			let _this = this
			uni.request({
				url: "http://localhost:8000/api/che",
				method: 'GET',
				success(res) {
					console.log('res', res.data)
					_this.Listdata = res.data.data
					console.log('this.Listdata', _this.Listdata)

					// 编辑
					if (option.datades) {
						_this.ondkekd(option.datades)
					}
					//新增
					if (option.xindata) {
						_this.onjdjdj(option.xindata)
					}
				},
				fail(err) {
					console.log('err', err)
				}
			})


		},
		methods: {
			// 编辑
			ondkekd(data) {

				let codedata = decodeURIComponent(data)
				let jscodata = JSON.parse(codedata)
				let _this = this
				console.log('data++++++', jscodata)
				_this.Listdata.forEach((item, index) => {
					if (item.id == jscodata.id) {
						_this.Listdata[index] = jscodata
					}
				})


			},
			// 新增
			onjdjdj(data) {
				let codedata = decodeURIComponent(data)
				let jscodata = JSON.parse(codedata)
				let _this = this
				console.log('data++++++', jscodata)
				_this.Listdata.unshift(jscodata)
				console.log('_this.Listdata___________', _this.Listdata)
			},
			onxinke(item) {
				if (item) {
					console.log('fffffff', item)
					const jsond = JSON.stringify(item)
					const code = encodeURIComponent(jsond)
					uni.navigateTo({
						url: "/pages/chenke/chenke?itemdata=" + code
					})
				} else {
					uni.navigateTo({
						url: "/pages/chenke/chenke"
					})
				}


			},
			// 页面触底行为
			onReachBottom() { // 触底
				console.log('页面触底了')

			},
			//  监听下拉行为事件
			onPullDownRefresh() { // 监听下拉
				console.log("下拉了")
				uni.showLoading({
						title: '拼命加载中', // 弹框
					}),
					setTimeout(() => {
						uni.showToast({
							title: "刷新成功"
						})
					}, 2000),
					setTimeout(() => {
						// 关闭加载弹框
						uni.hideLoading({
								success: (res) => {} //关闭弹框
							}),
							uni.stopPullDownRefresh({
								success: (res) => {}, // 获取接口数据后，停止下拉行为
							})
					}, 2000)
				// window.location.reload()       


			}
		}
	}
</script>

<style lang="scss">
	html,
	body {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #F5F4F5;
	}

	.icon-login {
		width: 100%;
		height: 60px;
		background-color: #00ACBD;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			width: 80px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.right {
			width: 120px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.onxing {
		width: 90%;
		height: 60px;
		background-color: white;
		border-radius: 10px;
		border-color: #ccc;
		margin-left: 15px;
		box-shadow: 0px 0px 1px 1px #ccc inset;
		margin-top: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin-right: 15px;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #4cd964;
		margin-right: 10px;
	}

	.jjss {
		display: flex;
		align-items: center;
	}
</style>